<template>
	<view class="container">
		<u-navbar title="足迹" @leftClick="goBack" placeholder></u-navbar>
		<z-paging :fixed="false" ref="paging" v-model="dataList" @query="getSystemInfoSync" created-reload>
			<view class="newsList" v-for="item in dataList" :key="item.id" @tap="tojob(item.jobid)">
				<view class="newsTop">
					<text>{{item.jobname}}</text>
					<text>{{item.wage_text}}</text>
				</view>
				<view class="brief">
					<text>{{item.education_text}}·{{item.experience_text}}·{{item.district_text}}</text>
					<view class="briefright"><text>{{item.companyname}}</text>
						<image src="/pages/pagesPersonal/static/personal/authentication.png"></image>
					</view>
				</view>
				<view class="more">
					<view class="moreleft">
						<image src="/pages/pagesPersonal/static/personal/footprint.png" mode=""></image>
						<text>{{item.click}}热度</text>
					</view>

					<text class="moreright">{{getMyDate(item.addtime*1000)}}查看</text>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	// 获取职位列表数据
	const paging = ref(null)
	let dataList = ref([])
	const getSystemInfoSync = async (pageNo, pageSize) => {

		let params = {
			page: pageNo,
			pagesize: pageSize
		}
		let res = await uni.$u.api.view_job({
			params
		})
		if (res) {
			paging.value.complete(res.items)
		}
	}

	const tojob = (id) => {
		uni.$u.route('pages/pagesHome/detailPages/job', {
			id
		})
	}

	function getMyDate(str) {
		var oDate = new Date(str),
			oYear = oDate.getFullYear(),
			oMonth = oDate.getMonth() + 1,
			oDay = oDate.getDate(),
			oHour = oDate.getHours(),
			oMin = oDate.getMinutes(),
			oSen = oDate.getSeconds(),
			oTime = oYear + '-' + addZero(oMonth) + '-' + addZero(oDay) + ' ' + addZero(oHour) + ':' +
			addZero(oMin) + ':' + addZero(oSen);
		return oTime;
	}
	//补零操作
	function addZero(num) {
		if (parseInt(num) < 10) {
			num = '0' + num;
		}
		return num;
	}
	const goBack = () => { // 返回事件
		uni.$u.route({
			type: 'back'
		})
	}
</script>

<style lang="scss">
	page,
	body {
		width: 100vw;
		height: 100%;
		background-color: #f8f8f8;
	}

	.container {
		width: 100%;
		height: 100%;
		padding: 30rpx;

		.newsList {
			padding: 30rpx;
			width: 100%;
			background-color: #fff;
			border-radius: 6rpx;
			margin-bottom: 20rpx;

			.newsTop {
				font-weight: bold;
				font-size: 32rpx;
				font-family: Arial;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text:nth-child(1) {
					width: 50%;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				text:nth-child(2) {
					font-size: 24rpx;
					color: #00D075;
					font-weight: normal;
				}
			}

			.brief {
				font-size: 26rpx;
				font-family: Arial;
				color: #867F7F;
				margin: 20rpx 0;
				display: flex;
				flex-direction: column;

				.briefright {
					display: flex;
					align-items: center;
					margin: 10rpx 0;

					text {
						max-width: calc(100% - 70rpx);
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					image {
						width: 70rpx;
						height: 28rpx;
						margin-left: 10rpx;
					}
				}
			}

			.more {
				color: #867F7F;
				font-size: 24rpx;
				font-family: Arial;
				display: flex;
				justify-content: space-between;
				border-top: 1rpx solid #ccc;
				padding-top: 20rpx;

				.moreleft {
					display: flex;
					align-items: center;

					image {
						width: 24rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
				}

				.moreright {
					color: #000;
				}

			}
		}
	}
</style>